<script setup>
import { Close } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const props = defineProps({
  file: {
    type: Object,
    default: () => ({}),
  },
})
const router = useRouter()
const userActions = ref({})
watch(
  () => props.file,
  () => {
    if (props.file?.operateRecord) {
      props.file.operateRecord.forEach((item) => {
        userActions.value = JSON.parse(item.operateData)
      })
    }
  },
  {
    immediate: true,
    deep: true,
  }
)
const emit = defineEmits(['close', 'loadMore'])

function jumpFile(item) {
  router.push({
    path: `/chat/fileManagement`,
    query: {
      id: item.folderId,
    },
  })
}
</script>

<template>
  <div class="file-detail" v-if="props.file?.resourceName">
    <div class="file-detail-header">
      <span class="file-name">{{ props.file.resourceName }}</span>
      <el-icon size="18" style="cursor: pointer" @click="emit('close')"><Close /></el-icon>
    </div>
    <div class="file-detail-body">
      <div class="detail-item file-info">
        <el-descriptions :column="1">
          <el-descriptions-item label="类型">
            {{ props.file.resourceType === 'folder' ? '文件夹' : props.file.resourceType }}
          </el-descriptions-item>
          <el-descriptions-item label="大小">{{ props.file.resourceSize }}</el-descriptions-item>
          <el-descriptions-item label="最近修改时间">{{ props.file.updateTime }}</el-descriptions-item>
          <el-descriptions-item label="上传时间">{{ props.file.createTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="detail-item" v-if="props.file.operateRecord?.length">
        <div class="title">动态</div>
        <div class="dynamic" v-for="(item, index) in props.file.operateRecord" :key="index">
          <div class="day">{{ item.createTime.slice(0, -8) }}</div>
          <div class="text">{{ item.createTime.slice(-8) }}</div>
          <div class="text">
            <span class="date">
              {{ userActions.nickName }}
            </span>
            {{ userActions.nickName }}
            {{ userActions.opTypeVO.opName }}
            <span v-for="(term, index) in userActions.pathList" :key="index">
              <span class="folder-link" @click="jumpFile(item)">{{ term.folderName }}/</span>
            </span>
            {{ item.operateTarget }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="file-detail no-file">
    <img src="@/assets/image/task/noFilePage-FileChoice.png" />
    <span>选择文件或文件夹，即可查看其详细信息。</span>
  </div>
</template>

<style scoped lang="scss">
.file-detail {
  height: 100%;
  width: 310px;
  overflow: auto;
  z-index: 2;
  &-enter-from,
  .file-detail-header {
    @include use-flex(center, space-between);
    border-bottom: var(--elp-border);
    padding: 15px;
    .file-name {
      font-size: 18px;
      width: 80%;
      overflow: hidden;
      word-break: break-all;
    }
  }
  .file-detail-body {
    padding: 0 15px;
    .detail-item {
      padding: 10px 5px;
      border-bottom: var(--elp-border);
      .permissions-icon {
        display: flex;
        flex-wrap: wrap;
        font-size: 16px;
      }
      &:hover {
        .title .svg-icon {
          display: inline-block;
        }
      }
      .title {
        @include use-flex(center, space-between);
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        .svg-icon {
          display: none;
          cursor: pointer;
        }
      }
      .member {
        @include use-flex();
        flex-wrap: wrap;
      }
      .dynamic {
        &:not(:last-child) {
          margin-bottom: 10px;
        }
        .day {
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .date {
          font-size: 14px;
          margin-bottom: 5px;
          padding-left: 10px;
        }
        .text {
          font-size: 12px;
          padding-left: 20px;
          margin-bottom: 5px;
        }
        .folder-link {
          color: #4386c6;
          cursor: pointer;
        }
      }
    }
    .file-info {
      :deep(.elp-descriptions) {
        font-size: 12px;
        .elp-descriptions__cell {
          font-size: 12px;
          .elp-descriptions__label {
            display: inline-block;
            width: 100px;
          }
        }
      }
    }
  }
}
.no-file {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: 100%;
  padding: 0 20px;
  color: var(--elp-color-info);
}
</style>
